<template>
  <span  @click="eventClick" :class="svgClassName">
    <svg class="svgNormal" >
      <use :xlink:href="'#'+iconClass"></use>
    </svg>
    <svg class="svgHover"  v-if="hoverClass">
      <use :xlink:href="'#'+hoverClass"></use>
    </svg>
  </span>
 
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    hoverClass:{
      type: String,
    },
    className: {
      type: String
    },
    toggleClick: {
      type: Function,
      default: function(){}
    }
  },
  computed:{
    svgClassName: function(){
      if(this.className){
        return 'svgIcon ' + this.className
      }else{
        return 'svgIcon'
      }
    },

  },
  methods:{
    eventClick(){
      this.toggleClick()
    }
  }
}
</script>

<style scoped lang="scss">

.svgIcon{
  svg{
    min-width: 16px;
    min-height: 16px;
    width: 100%;
    height: 100%;
    fill: currentColor;
    overflow: hidden;
    &.svgHover{
      display: none;
    }
   
  }
   &:hover{
      .svgNormal{
        display: none;
      }
      .svgHover{
        display: inline-block;
      }
    }

}
</style>